<!DOCTYPE html>
<html>
<head>
  <title>题目列表</title>
  <meta charset="utf-8">
<!--  <link rel="stylesheet" href="/static/problemListCss.css">-->
</head>
<body>
<div id="app">
  <table>
    <thead>
    <tr>
      <th>ID</th>
      <th>标题</th>
      <th>难度</th>
    </tr>
    </thead>
    <tbody>
    <tr v-for="problem in problems" :key="problem.id">
      <td>{{problem.id}}</td>
      <td><router-link :to="{name: 'problemDetail', params: {id: problem.id}}">{{problem.title}}</router-link></td>
      <td>{{problem.level}}</td>
    </tr>
    </tbody>
  </table>

  <router-view></router-view>
</div>

<!-- Vue.js库文件 -->
<script src="https://cdn.jsdelivr.net/npm/vue@3.1.4/dist/vue.min.js"></script>
<!-- Vue Router库文件 -->
<script src="https://cdn.jsdelivr.net/npm/vue-router@4.0.11/dist/vue-router.min.js"></script>
<!-- axios库文件 -->
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>

<!-- 问题详情组件的模板 -->
<script type="text/x-template" id="problem-detail">
  <div class="container">
    <h1>题目详情</h1>
    <div class="problem">
      <div class="problem-header">
        <h2>题目ID：{{ problemData.id }}</h2>
        <div class="problem-level">{{ problemData.level }}</div>
      </div>
      <h3>题目标题：{{ problemData.title }}</h3>
      <div class="problem-description">
        <p>{{ problemData.description }}</p>
      </div>
      <form @submit.prevent="submitCode">
        <textarea class="problem-editor" v-model="userCode">{{ problemData.templateCode }}</textarea>
        <br />
        <button type="submit" class="submit-button">提交代码</button>
      </form>
    </div>
  </div>
</script>

<script>
    const ProblemDetailComponent = {
      template: '#problem-detail',
      data() {
        return {
          problemData: {},
          userCode: ''
        }
      },
      created() {
        this.getProblemData();
      },
      methods: {
        getProblemData() {
          const id = this.$route.params.id;
          axios.get('/api/problems/' + id)
            .then(response => {
              this.problemData = response.data;
              this.userCode = response.data.templateCode;
            })
            .catch(error => {
              console.log(error);
            });
        },
        submitCode() {
          console.log(this.userCode);
        }
      }
    }

    const router = new VueRouter({
      routes: [
        {path: '/', component: {template: '<div>首页</div>'}},
        {
          path: '/problem/:id',
          name: 'problemDetail',
          component: ProblemDetailComponent
        }
      ]
    });

    const app = new Vue({
      el: '#app',
      router,
      data() {
        return {
          problems: []
        }
      },
      created() {
        this.getProblems();
      },
      methods: {
        getProblems() {
          axios.get('/api/problems')
            .then(response => {
              this.problems = response.data;
            })
            .catch(error => {
              console.log(error);
            });
        }
      }
    });
  </script>
</body>
</html>
